<div class="page-header">
	<h1>Form Wizard <small><i class="ace-icon fa fa-angle-double-right"></i> and Validation</small></h1>
</div>


<script type="text/ng-template" id="mywizard.html">
 <div class="steps">
  <ul class="steps steps-indicator steps-{{getEnabledSteps().length}}" ng-if="!hideIndicators">
	<li ng-click="goTo(step)" ng-class="{active: step.selected, complete: step.completed && currentStepNumber() > step.wzData.number}" ng-repeat="step in getEnabledSteps()">
      <span class="step" ng-bind="step.wzData.number"></span><span class="title" ng-bind="step.title || step.wzTitle"></span>
    </li>
  </ul>
  <hr />
  <div class="steps step-content pos-rel" ng-transclude></div>
 </div>
</script>

<script type="text/ng-template" id="mystep.html">
 <section ng-show="selected" ng-class="{active: selected, done: completed}" class="step-pane" ng-transclude></section>
</script>



<div class="widget-box">
	<div class="widget-header widget-header-blue widget-header-flat">
		<h4 class="widget-title lighter">New Item Wizard</h4>
		<div class="widget-toolbar">
			<label>
				<small class="green"><b>Validation</b></small>
				<input type="checkbox" ng-model="validationOn" class="ace ace-switch ace-switch-4" />
				<span class="lbl middle"></span>
			</label>
		</div>
	</div>

	
	<div class="widget-body">
	 <div class="widget-main">

			<wizard on-finish="finishedWizard()" template="mywizard.html" current-step="currentStepName" name="myWizard"> 
				<wz-step template="mystep.html" wz-title="Validation states" wz-data="{'number': 1}" canexit="isValidForm">
				
					<h3 class="lighter block green">Enter the following information</h3>
					<form class="form-horizontal" ng-show="!validationOn">
						
						<div class="form-group has-warning">
							<label for="inputWarning" class="col-xs-12 col-sm-3 control-label no-padding-right">Input with warning</label>
							<div class="col-xs-12 col-sm-5">
								<span class="block input-icon input-icon-right">
									<input type="text" id="inputWarning" class="width-100" />
									<i class="ace-icon fa fa-leaf"></i>
								</span>
							</div>
							<div class="help-block col-xs-12 col-sm-reset inline">
								Warning tip help!
							</div>
						</div>
						
						<div class="form-group has-error">
							<label for="inputError" class="col-xs-12 col-sm-3 col-md-3 control-label no-padding-right">Input with error</label>
							<div class="col-xs-12 col-sm-5">
								<span class="block input-icon input-icon-right">
									<input type="text" id="inputError" class="width-100" />
									<i class="ace-icon fa fa-times-circle"></i>
								</span>
							</div>
							<div class="help-block col-xs-12 col-sm-reset inline">
								Error tip help!
							</div>
						</div>
						
						<div class="form-group has-success">
							<label for="inputSuccess" class="col-xs-12 col-sm-3 control-label no-padding-right">Input with success</label>
							<div class="col-xs-12 col-sm-5">
								<span class="block input-icon input-icon-right">
									<input type="text" id="inputSuccess" class="width-100" />
									<i class="ace-icon fa fa-check-circle"></i>
								</span>
							</div>
							<div class="help-block col-xs-12 col-sm-reset inline">
								Success tip help!
							</div>
						</div>
						
						<div class="form-group has-info">
							<label for="inputInfo" class="col-xs-12 col-sm-3 control-label no-padding-right">Input with info</label>
							<div class="col-xs-12 col-sm-5">
								<span class="block input-icon input-icon-right">
									<input type="text" id="inputInfo" class="width-100" />
									<i class="ace-icon fa fa-info-circle"></i>
								</span>
							</div>
							<div class="help-block col-xs-12 col-sm-reset inline">
								Info tip help!
							</div>
						</div>
						
						<div class="form-group">
							<label for="inputError2" class="col-xs-12 col-sm-3 control-label no-padding-right">Input with error</label>
							<div class="col-xs-12 col-sm-5">
								<span class="input-icon block">
									<input type="text" id="inputError2" class="width-100" />
									<i class="ace-icon fa fa-times-circle red"></i>
								</span>
							</div>
							<div class="help-block col-xs-12 col-sm-reset inline">
								Error tip help!
							</div>
						</div>

					</form>
					
					<form class="form-horizontal" name="myForm" ng-init="updateFormScope()" ng-show="validationOn" method="get" novalidate>
					  
						<div class="form-group" ng-class="{'has-error': hasError('email')}">
							<label class="control-label col-xs-12 col-sm-3 no-padding-right" for="email">Email Address:</label>
							<div class="col-xs-12 col-sm-9">
								<div class="clearfix">
									<input type="email" name="email" ng-model="email" required class="col-xs-12 col-sm-6" />
								</div>
								<div class="help-block" ng-show="hasError('email')" ng-messages="myForm.email.$error">
									<div ng-message="required">Please specify an email address</div>
									<div ng-message="email">Email address is not valid</div>
								</div>
							</div>
						</div>
						
						<div class="space-2"></div>
						
						<div class="form-group" ng-class="{'has-error': hasError('password')}">
							<label class="control-label col-xs-12 col-sm-3 no-padding-right" for="password">Password:</label>
							<div class="col-xs-12 col-sm-9">
								<div class="clearfix">
									<input type="password" name="password" ng-model="password" required ng-minlength="6" class="col-xs-12 col-sm-4" />
								</div>
								<div class="help-block" ng-show="hasError('password')" ng-messages="myForm.password.$error">
									<div ng-message="required">Please specify a password</div>
									<div ng-message="minlength">Please specify a secure password</div>
								</div>
							</div>							
						</div>
						
						<div class="space-2"></div>
						
						<div class="form-group" ng-class="{'has-error': hasError('password2')}">
							<label class="control-label col-xs-12 col-sm-3 no-padding-right" for="password2">Confirm Password:</label>
							<div class="col-xs-12 col-sm-9">
								<div class="clearfix">
									<input type="password" name="password2" ng-model="password2" required ng-pattern="{{password}}" class="col-xs-12 col-sm-4" />
								</div>
								<div class="help-block" ng-show="hasError('password2')" ng-messages="myForm.password2.$error">
									<div ng-message="required">This field is required</div>
									<div ng-message="pattern">Please enter the same value again</div>
								</div>
							</div>							
						</div>
						
						<div class="hr hr-dotted"></div>
						
						<div class="form-group" ng-class="{'has-error': hasError('companyName')}">
							<label class="control-label col-xs-12 col-sm-3 no-padding-right" for="companyName">Company Name:</label>
							<div class="col-xs-12 col-sm-9">
								<div class="clearfix">
									<input type="text" name="companyName" ng-model="companyName" required class="col-xs-12 col-sm-5" />
								</div>
								<div class="help-block" ng-show="hasError('companyName')" ng-messages="myForm.companyName.$error">
									<div ng-message="required">This field is required</div>
								</div>
							</div>
						</div>
						
						<div class="space-2"></div>
						
						<div class="form-group" ng-class="{'has-error': hasError('phone')}">
							<label class="control-label col-xs-12 col-sm-3 no-padding-right" for="phone">Phone Number:</label>
							<div class="col-xs-12 col-sm-9">
								<div class="input-group">
									<span class="input-group-addon"><i class="ace-icon fa fa-phone"></i></span>
									<input type="tel" name="phone" ng-model="phone" ui-mask="(999) 999-9999" required />
								</div>
								<div class="help-block" ng-show="hasError('phone')" ng-messages="myForm.phone.$error">
									<div ng-message="required">This field is required</div>
								</div>
							</div>
						</div>
						
						<div class="space-2"></div>
						
						<div class="form-group" ng-class="{'has-error': hasError('url')}">
							<label class="control-label col-xs-12 col-sm-3 no-padding-right" for="url">Company URL:</label>
							<div class="col-xs-12 col-sm-9">
								<div class="clearfix">
									<input type="url" name="url" ng-model="url" required class="col-xs-12 col-sm-8" />
								</div>
								<div class="help-block" ng-show="hasError('url')" ng-messages="myForm.url.$error">
									<div ng-message="required">This field is required</div>
									<div ng-message="url">URL format is not valid</div>
								</div>
							</div>
						</div>
						
						
			
						<div class="hr hr-dotted"></div>
						
						<div class="form-group" ng-class="{'has-error': hasError('subscription')}">
							<label class="control-label col-xs-12 col-sm-3 no-padding-right">Subscribe to</label>
							<div class="col-xs-12 col-sm-9">
								<div>
									<label>
										<input type="checkbox" class="ace" name="subscription" value="1" ng-model="subscription[0]" ng-required="!userSubscribed(subscription)" />
										<span class="lbl"> Latest news and announcements</span>
									</label>
								</div>
								<div>
									<label>
										<input type="checkbox" class="ace" name="subscription" value="2" ng-model="subscription[1]" ng-required="!userSubscribed(subscription)" />
										<span class="lbl"> Product offers and discounts</span>
									</label>
								</div>
								
								<div class="help-block" ng-show="hasError('subscription')" ng-messages="myForm.subscription.$error">
									<div ng-message="required">Please choose at least one subscription!</div>
								</div>
							</div>
						</div>
						
						<div class="space-2"></div>
						
						<div class="form-group" ng-class="{'has-error': hasError('gender')}">
							<label class="control-label col-xs-12 col-sm-3 no-padding-right">Gender</label>
							<div class="col-xs-12 col-sm-9">
								<div>
									<label class="line-height-1 blue">
										<input name="gender" value="1" type="radio" class="ace" ng-model="gender" required />
										<span class="lbl"> Male</span>
									</label>
								</div>
								<div>
									<label class="line-height-1 blue">
										<input name="gender" value="2" type="radio" class="ace" ng-model="gender" required />
										<span class="lbl"> Female</span>
									</label>
								</div>
								
								<div class="help-block" ng-show="hasError('gender')" ng-messages="myForm.gender.$error">
									<div ng-message="required">Please choose gender!</div>
								</div>
							</div>
						</div>

						<div class="hr hr-dotted"></div>

						<div class="form-group" ng-class="{'has-error': hasError('state')}">
							<label class="control-label col-xs-12 col-sm-3 no-padding-right" for="state">State</label>
							<div class="col-xs-12 col-sm-9">
								<select chosen="{width: '200px'}" allow-single-deselect="true" name="state" ng-model="state" required ng-options="state.name for state in getCommonData('states') track by state.abbr" class="chosen-select form-control"  data-placeholder="Choose a State...">
									<option value=""> </option>
								</select>
								
								<div class="help-block" ng-show="hasError('state')" ng-messages="myForm.state.$error">
									<div ng-message="required">Please choose state!</div>
								</div>
							</div>					
						</div>
						
						<div class="space-2"></div>
						
						<div class="form-group" ng-class="{'has-error': hasError('platform')}">
							<label class="control-label col-xs-12 col-sm-3 no-padding-right" for="platform">Platform</label>
							<div class="col-xs-12 col-sm-9">
								<div class="clearfix">
									<select class="input-medium" name="platform" ng-model="platform" required>
										<option value="">------------------</option>
										<option value="linux">Linux</option>
										<option value="windows">Windows</option>
										<option value="mac">Mac OS</option>
										<option value="ios">iOS</option>
										<option value="android">Android</option>
									</select>
								</div>
								<div class="help-block" ng-show="hasError('platform')" ng-messages="myForm.platform.$error">
									<div ng-message="required">Please choose platform!</div>
								</div>
							</div>
						</div>
						
						<div class="space-2"></div>
						
						<div class="form-group" ng-class="{'has-error': hasError('comment')}">
							<label class="control-label col-xs-12 col-sm-3 no-padding-right" for="comment">Comment</label>
							<div class="col-xs-12 col-sm-9">
								<div class="clearfix">
									<textarea class="input-xlarge" name="comment" ng-model="comment" required></textarea>
								</div>
								<div class="help-block" ng-show="hasError('comment')" ng-messages="myForm.comment.$error">
									<div ng-message="required">Please leave a comment!</div>
								</div>
							</div>
						</div>

						<div class="space-8"></div>
						
						<div class="form-group" ng-class="{'has-error': hasError('agree')}">
							<div class="col-xs-12 col-sm-4 col-sm-offset-3">
								<label>
									<input name="agree" ng-model="agree" type="checkbox" class="ace" required />
									<span class="lbl"> I accept the policy</span>
								</label>
								
								<div class="help-block" ng-show="hasError('agree')" ng-messages="myForm.agree.$error">
									<div ng-message="required">Please agree to continue!</div>
								</div>
							</div>
						</div>

					  </form>
				</wz-step>
				
				<wz-step template="mystep.html" wz-title="Alerts" wz-data="{'number': 2}" canenter="canEnterStep">
				   <div>
						<uib-alert type="success" close="alert.close(0)" ng-if="alert.shown[0]">
							<strong><i class="ace-icon fa fa-check"></i> Well done!</strong>
							You successfully read this important alert message. <br />
						</uib-alert>

						<uib-alert type="danger" close="alert.close(1)" ng-if="alert.shown[1]">
							<strong><i class="ace-icon fa fa-times"></i> Oh snap!</strong>
							Change a few things up and try submitting again. <br />
						</uib-alert>
						
						<uib-alert type="warning" close="alert.close(2)" ng-if="alert.shown[2]">
							<strong>Warning!</strong>
							Best check yo self, you're not looking too good. <br />
						</uib-alert>
						
						<uib-alert type="info" close="alert.close(3)" ng-if="alert.shown[3]">
							<strong>Heads up!</strong>
							This alert needs your attention, but it's not super important. <br />
						</uib-alert>
					</div>
				</wz-step>
				
				<wz-step template="mystep.html" wz-title="Payment Info" wz-data="{'number': 3}" canenter="canEnterStep">
					<div class="center">
						<h3 class="blue lighter">This is step 3</h3>
					</div>
				</wz-step>
				
				<wz-step template="mystep.html" wz-title="Other Info" wz-data="{'number': 4}" canenter="canEnterStep">
				   <div class="center">
						<h3 class="green">Congrats!</h3>
						Your product is ready to ship! Click finish to continue!
					</div>
				</wz-step>
				
				
				<hr />
				<div class="wizard-actions">
					<button class="btn btn-prev" wz-previous ng-disabled="currentStepNumber == 1" ng-class="{'disabled' : currentStepNumber == 1}"><i class="ace-icon fa fa-arrow-left"></i> Prev</button>
					<button class="btn btn-success wz-next" wz-next ng-hide="isFinalStep">Next <i class="ace-icon fa fa-arrow-right icon-on-right"></i></button>
					<button class="btn btn-success wz-finish" wz-finish ng-hide="!isFinalStep">Finish <i class="ace-icon fa fa-arrow-right icon-on-right"></i></button>
				</div>
			</wizard>
			
		</div>
	   </div>
</div>